<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7/dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="../../css/index.css" />
<link rel="stylesheet" type="text/css" href="../../css/personal.css" />
<link rel="stylesheet" type="text/css" href="../../css/background.css" />
<script type="text/javascript" src="../../bootstrap-3.3.7/dist/js/jquery.min.js"></script>
<script type="text/javascript" src="../../bootstrap-3.3.7/dist/js/bootstrap.js"></script>
<!-- bootstrap表格插件 -->
<script src="../../bootstrap-3.3.7/dist/js/bootstrap-table.js"></script>
<link href="../../bootstrap-3.3.7/dist/css/bootstrap-table.css" rel="stylesheet" />
<script src="../../bootstrap-3.3.7/dist/js/bootstrap-table-zh-CN.js"></script>
<script src="../../js/echarts.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../bootstrap-3.3.7/docs/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="../../js/echarts.min.js"></script>
</head>
<body>
	<div class="col-md-12"">
		<input type='text' id='library' hidden="true" value="<%=request.getParameter("ku")%>" />
		<input type='text' id='type' hidden="true" value="<%=request.getParameter("type")%>" /> 
		<input type='text' id='startdate' hidden="true" value="<%=request.getParameter("startdate")%>" /> 
		<input type='text' id='enddate' hidden="true" value="<%=request.getParameter("enddate")%>" />
		<ul id="myTab" class="nav nav-tabs">
			<li class="active"><a href="#table" data-toggle="tab"> 表格 </a></li>
			<li><a href="#bt" data-toggle="tab">饼图</a></li>
			<li><a href="#zft" data-toggle="tab">直方图</a></li>
		</ul>
		<div id="myTabContent" class="tab-content">
			<div class="tab-pane fade in active" id="table">
				<table id="zscount"></table>
			</div>
			<div class="tab-pane fade" id="bt" style="width: 600px; height: 400px; margin-left: 100px; margin-top: 100px"></div>
			<div class="tab-pane fade" id="zft" style="width:600px;height:400px;margin-left:100px;margin-top:100px"></div>
		</div>
	</div>
</body>
<script type="text/javascript">
var zftChart = echarts.init(document.getElementById("zft"));
//指定图表的配置项和数据
zftChart.setOption({
	title : {
		text : '知识数量直方图'
	},
	tooltip : {},
	legend : {
		data : ['知识总数','新增知识数','删除知识数']
	},
	xAxis : {
		//show : false,
		data : [],
		axisLabel:{
	          interval:0,
	          rotate:45,
	          margin:2,
	          textStyle:{
	          color:"#222"
	          }
		},
	},
	yAxis : {},
	series : [{
		name : '知识总数',
		type : 'bar',
		data : []
	},
	{
		name : '新增知识数',
		type : 'bar',
		data : []
	},
	{
		name : '删除知识数',
		type : 'bar',
		data : []
	}]
});
var btChart = echarts.init(document.getElementById("bt"));
btChart.setOption({
	title : {
		text : '知识数量饼图',
	//	subtext : '纯属虚构',
		x : 'center'
	},
	tooltip : {
		trigger : 'item',
		formatter : "{a} <br/>{b} : {c} ({d}%)"
	},
	legend : {
		orient : 'vertical',
		left : 'left',
		data : []
	},
	series : [{
		name : '知识数量',
		type : 'pie',
		radius : '55%',
		center : ['50%', '60%'],
		data : [],
		itemStyle : {
			emphasis : {
				shadowBlur : 10,
				shadowOffsetX : 0,
				shadowColor : 'rgba(0, 0, 0, 0.5)'
			}
		}
	}]
});
	$(function() {
		//1.初始化Table
		var oTable = new TableInit();
		oTable.Init();
		
		$.ajax({
			type : "GET",
			url : "../staticanaly/getInfoNumber",
			data : {
				limit : 0, //页面大小
				offset : 0, //页码初始开始值
				starttime : $("#startdate").val(),
				endtime : $("#enddate").val(),
				ku : $("#library").val(),
				type : $("#type").val()
			},
			dataType : "json", //返回数据形式为json
			success : function(result) {
				var data=result.rows;
				if(data){
					var names = [];
					var allnums = []; //销量数组（实际用来盛放Y坐标值）
					var addnums = [];
					var delnums = [];
					var arr = [];
					for (var i = 0; i < data.length; i++) {
						names.push(data[i].name);
						allnums.push(data[i].allnumber);
						addnums.push(data[i].addnumber);
						delnums.push(data[i].deletenumber);
						arr.push({
							name : data[i].name,
							value : data[i].allnumber
						});
					}
					zftChart.hideLoading(); //隐藏加载动画
					zftChart.setOption({ //加载数据图表
						title : {
							text : '知识数量直方图'
						},
						tooltip : {},
						legend : {
							data : ['知识总数','新增知识数','删除知识数']
						},
						xAxis : {
							data : names
						},
						yAxis : {},
						series : [{
							name : '知识总数',
							type : 'bar',
							data : allnums
						},
						{
							name : '新增知识数',
							type : 'bar',
							data : addnums
						},
						{
							name : '删除知识数',
							type : 'bar',
							data : delnums
						}]
					});
					btChart.hideLoading(); //隐藏加载动画
					btChart.setOption({
						title : {
							text : '知识数量饼图',
						//	subtext : '纯属虚构',
							x : 'center'
						},
						tooltip : {
							trigger : 'item',
							formatter : "{a} <br/>{b} : {c} ({d}%)"
						},
						legend : {
							orient : 'vertical',
							left : 'left',
							data : names
						},
						series : [{
							name : '知识数量',
							type : 'pie',
							radius : '55%',
							center : ['50%', '60%'],
							data : arr,
							itemStyle : {
								emphasis : {
									shadowBlur : 10,
									shadowOffsetX : 0,
									shadowColor : 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					});
				}	
			},
			error : function(errorMsg) {
				//请求失败时执行该函数
				alert("图表请求数据失败!");
				btChart.hideLoading();
			}
		});

	});
	var TableInit = function() {
		var oTableInit = new Object();
		//初始化Table
		oTableInit.Init = function() {
			$('#zscount').bootstrapTable({
				url : '../staticanaly/getInfoNumber', //请求后台的URL（*）
				method : 'get', //请求方式（*）
				toolbar : '#toolbar', //工具按钮用哪个容器
				striped : true, //是否显示行间隔色
				cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
				pagination : true, //是否显示分页（*）
				sortable : true, //是否启用排序
				sortOrder : "asc", //排序方式
				queryParams : oTableInit.queryParams,//传递参数（*）
				sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
				pageNumber : 1, //初始化加载第一页，默认第一页
				pageSize : 10, //每页的记录行数（*）
				pageList : [10, 25, 50, 100], //可供选择的每页的行数（*）
				search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
				strictSearch : true,
				showColumns : true, //是否显示所有的列
				showRefresh : true, //是否显示刷新按钮
				minimumCountColumns : 2, //最少允许的列数
				clickToSelect : true, //是否启用点击选中行
				height : 525, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
				uniqueId : "ID", //每一行的唯一标识，一般为主键列
				showToggle : true, //是否显示详细视图和列表视图的切换按钮
				cardView : false, //是否显示详细视图
				detailView : false, //是否显示父子表
				columns : [{
					field : 'name',
					title : '库'
				}, {
					field : 'allnumber',
					title : '知识总数'
				}, {
					field : 'addnumber',
					title : '知识新增量'
				}, {
					field : 'deletenumber',
					title : '知识删除数'
				}]
			});
		};

		//得到查询的参数
		oTableInit.queryParams = function(params) {
			var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
				limit : params.limit, //页面大小
				offset : params.offset, //页码初始开始值           
				starttime : $("#startdate").val(),
				endtime : $("#enddate").val(),
				ku : $("#library").val(),
				type : $("#type").val()
			};
			return temp;
		};
		return oTableInit;
	};
</script>
</html>